<template>
  <div>
    <div class="head">header</div>
    <button @click="sonClick">子组件调用父组件的方法</button>

    <div>{{ title }}</div>
    <div>{{ content }}</div>
    <div>{{ name }}</div>
    <div>{{ Obj }}</div>
    <button @click="btnClick">啊啊啊</button>
  </div>
</template>

<script>
export default {
  // 1.子组件中对props进行注册后使用数组写法
  // props: ['title', 'content', 'sonClick'],
  // 2.对象写法对传递的props限制
  props: {
    age: Number,
    ageStr: String,
    title: String,
    content: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      default: '你没传参name',
    },
    // 默认值为对象类型时需要写成函数的返回值
    Obj: {
      type: Object,
      default() {
        return {
          obj: 'aaa',
        }
      },
    },
    // 默认值为函数类型需要直接默认函数
    sonClick: {
      type: Function,
      default() {
        console.log('我被点击了')
      },
    },
  },
  methods: {
    btnClick() {
      console.log('子组件中的btnClick方法被调用了')
      this.sonClick()
    },
  },
}
</script>

<style scoped></style>
